/**
 * Draggabilly demo page
 */

docReady( function() {

  'use strict';

  // ----- setText helper ----- //
  var docElem = document.documentElement;
  // 根据浏览器选择textContent还是innerText
  var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';
  // 设置元素的text
  function setText( elem, value ) {
    elem[ textSetter ] = value;
  }

  // ----- getRandom 获取一个随机数----- //

  function getRandom( ary ) {
    var index = Math.floor( Math.random() * ary.length );
    return ary[ index ];
  }

  // -----  ----- //

  var Draggabilly = window.Draggabilly;
  var  windowHeight= $(window).height();
      var  windowWidth= $(window).width();
      $('.example-frame #container,.two').css({
          width: windowWidth+"px",
          height: windowHeight+"px",    
      })
        // 外框 
      $('.example-frame,.left,.right').css({
          width: windowWidth+"px",
          height: windowHeight+"px",
      })
        // 拖拽
        var _this=$('.draggie');
    var container = document.querySelector('#container');
    var elems = container.querySelectorAll('.draggie');
    // 给container里的每一个元素加拖动事件，TRUE为在框内
    for ( var i=0, len = elems.length; i < len; i++ ) {
      var elem = elems[i];
      new Draggabilly( elem, {
          containment: true
      });
    }
        // 叶子下落
      _this.animate({top:500 +'px', left: '50px'}, 2000);
        // 触摸判断距离
        var touchEvents = {
            touchend: "touchend",
            touchmove:"touchmove",
            touchstart:"touchstart",
            touch:'touch',
            //判断是否pc设备，若是pc，需要更改touch事件为鼠标事件，否则默认触摸事件   
            initTouchEvents: function () {
                if (isPC()) {
                    this.touchend = "mouseup";
                    this.touchstart = "mousemove";
                }
            }
        };
        // 离开触摸屏时获得此时拖动元素的距离，来判断事件是否触发
        _this.bind(touchEvents.touchend, function () {
            var height = _this.offset().top;
            var width = _this.offset().left;
            var left = $('.left');
            var right = $('.right');
           var two = $('.two');
            // 移动到moveheight这个距离和这个距离之间就触发事件
            var moveheight = windowHeight*0.15;
            var movewidth = windowWidth*0.15;
            var moveheight1= windowHeight*0.65;
            var movewidth1 = windowWidth*0.65;
            if (height>=moveheight&&height<=moveheight1&&width>=movewidth&&width<=movewidth1) {
                $('#k').hide();
                two.delay(500).animate({top:'-2000px'}, 1000);
                left.animate({left: -windowWidth*3 +'px'}, 2500);//左移动
                right.animate({left: windowWidth*3 +'px'}, 2500);//右移动
                _this.hide();$('#container').hide();
                
            };
            
        });
        $('.draggie').bind(touchEvents.touchstart, function () {
            $('.draggie').removeClass('z');
            $('.two').show();
            $('.choose-box').show();
            $('.start').show();
        })
        // 将盒子隐藏
        var start = $('.start');
        start.bind(touchEvents.touchstart, function (){
            $('.choose-box').show();
            $('.choose ul li').animate({margin: '20px'}, 1000);
            $(this).fadeOut('1000', function() {
                $(this).css({
                    'opacity': '0.1',
                });
            });
            $('.s').hide();
        })
        // 将自己选择的承诺往上移动 承诺
        $('.list-box').bind(touchEvents.touchstart, function (){
            $('.start').hide();
            $(this).animate({opacity: '0',}, 700);
            $('.reg').animate({opacity: 1,'z-index':'10'}, 700);
            $('.reg').css({
                display: 'block',
            });
            $('.s').hide();
        })
        // 选择你的承诺
        var li = $('.choose ul li');
        var list = $('.list-box .list');
        var choose = $('.choose');
        var two = $('.two');
        var c = $('.choose ul .c');
        var ul = $('.choose ul');
        // 点击跑到相应的页面
        var one = './images/1.png',sleep = './images/sleep.png',two='./images/2.png',family= 'images/family.png',three = './images/3.png',eat = 'images/eat.png',four = './images/4.png',sport = './images/sport.png',five = './images/5.png',water = 'images/water.png';
        // 设li的宽度
        li.css({
            height:windowWidth*0.1+'px' ,
        });
        // 单击颜色变化
        li.on(touchEvents.touchstart, function (){
            var eq = $(this).index();
            $('.hi').val(eq);
            var num = eq+1;
            switch (num) {
                case 1:
                    li.eq(0).css({
                       background: 'url('+one+')no-repeat 0px 0px',
                       'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;alert(num)
                case 2:
                    li.eq(1).css({
                       background: 'url('+two+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 3:
                    li.eq(2).css({
                       background: 'url('+three+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url(./images/sport.png)no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 4:
                    li.eq(3).css({
                       background: 'url('+four+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 5:
                    li.eq(4).css({
                       background: 'url('+five+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });                    
                    break;
            }                  
        });
        // 点击提交按钮时显示提交的页面  承诺
        $('#btn').on(touchEvents.touchstart, function (){
            $('.start').hide();
            $('.choose').animate({'opacity': 0,}, 700);

            var v = $('.hi').val();
            list.eq(v).animate({
                'z-index': '8',
                'opacity': '1',
            },700).siblings('.list').css({
                // 'z-index': '6',
                'opacity': '0'
            },700);
            $('.list-box').animate({opacity: 1,'z-index':'7'}, 700);
            $('.s').show();

            var con = ['我承诺每晚保证7小时睡眠','每周一天专陪家人','每日三餐按时吃饭','每周至少锻炼3小时','每天喝足8杯水'];
            var mebtnopenurl = window.location.href;
            window.shareData = {
                "imgUrl": "http://c39_jiang.houdunphp.com/drage15/images/sh.jpg",
                "timeLineLink": window.location.href,
                "tTitle": "我的健康承诺",
                "tContent": '在爱康君安生命梦想家颁奖盛典,我承诺'+con[v]+'。'
            };
            document.addEventListener("WeixinJSBridgeReady",
            function onBridgeReady() {
                WeixinJSBridge.on("menu:share:appmessage",
                function(a) {
                    WeixinJSBridge.invoke("sendAppMessage", {
                        "img_url": window.shareData.imgUrl,
                        "link": window.shareData.timeLineLink,
                        "desc": window.shareData.tContent,
                        "title": window.shareData.tTitle
                    },
                    function(b) {
                        document.location.href = mebtnopenurl
                    })
                });
                WeixinJSBridge.on("menu:share:timeline",
                function(a) {
                    WeixinJSBridge.invoke("shareTimeline", {
                        "img_url": window.shareData.imgUrl,
                        "img_width": "300",
                        "img_height": "300",
                        "link": window.shareData.timeLineLink,
                        "desc": window.shareData.tContent,
                        "title": window.shareData.tContent
                    },
                    function(b) {
                        document.location.href = mebtnopenurl
                    })
                })
            },
            false);
            $(document).ready(function() {
                function a() {
                    WeixinJSBridge.call("hideToolbar")
                }
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener("WeixinJSBridgeReady", a, false)
                    } else {
                        if (document.attachEvent) {
                            document.attachEvent("WeixinJSBridgeReady", a);
                            document.attachEvent("onWeixinJSBridgeReady", a)
                        }
                    }
                } else {
                    a()
                }
            });
            // 分享结束
        })

        // 收集用户信息，提交到后台
        $('.botton').on(touchEvents.touchstart, function (){
            
            var username  = $('.username').val();
            var pwd = $('.pwd').val();
            if (username!=''&&pwd!='') {
                var data = $('form[name=reg-form]').serialize();
                $.ajax({
                    url: '../www/index.php',//请求地址
                    type:'post',//传送方式
                    data:data,//发送数据
                    dataType:'json',//返回数据类型
                    success:function(data){
                        // alert(data.password);
                    }
                })
                alert('成功提交。');
                location.href = "";
            }else{
                alert('提交内容不能为空。');
            };
            
        }) 
});

